<template>
   <div class="good-list-wrap">
     <good-list :goodList="dateFactory.goodList" :ruleForm="dateFactory.ruleForm"></good-list>
      <option-right v-if="dateFactory.activeBorder">
        <div class="option-wrap">
          <el-form :model="ruleFormLocal" label-width="100px">
            <div class="edit-componet-title">
              商品
            </div>
            <el-form-item label="标题样式" prop="styleTypeTitle">
              <el-radio-group v-model="ruleFormLocal.styleTypeTitle">
                <el-radio :label="0">类型1</el-radio>
                 <el-radio :label="1">类型2</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="列表样式" prop="listStyle">
              <el-radio-group v-model="ruleFormLocal.listStyle">
                <el-radio :label="0">一行两个</el-radio>
                <el-radio :label="1">一行一个</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="商品样式" prop="goodStyle">
              <el-radio-group v-model="ruleFormLocal.goodStyle">
                <el-radio :label="0">瀑布流</el-radio>
                <el-radio :label="1">普通列表</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="图片比例" prop="imgScale" v-if="ruleFormLocal.goodStyle == 1">
              <el-radio-group v-model="ruleFormLocal.imgScale">
                <el-radio :label="0">3:2</el-radio>
                <el-radio :label="1">1:1</el-radio>
                <el-radio :label="2">3:4</el-radio>
                <el-radio :label="3">16:9</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="页面边距" prop="pagePadding">
              <div class="side">
                <el-slider 
                  v-model="ruleFormLocal.pagePadding"
                  :min="0" 
                  :max="30"
                ></el-slider>
                <span>{{ruleFormLocal.pagePadding}}像素</span>
              </div>
            </el-form-item>
            <el-form-item label="商品间距" prop="goodPadding">
              <div class="side">
                <el-slider 
                  v-model="ruleFormLocal.goodPadding"
                  :min="0" 
                  :max="30"
                ></el-slider>
                <span>{{ruleFormLocal.goodPadding}}像素</span>
              </div>
            </el-form-item>
            <el-form-item label="商品倒角" prop="goodBorder">
              <el-radio-group v-model="ruleFormLocal.goodBorder">
                <el-radio :label="0">直角</el-radio>
                <el-radio :label="1">圆角</el-radio>
              </el-radio-group>
            </el-form-item>
            
          </el-form>
        </div>
      </option-right>
    </div>
</template>

<script>
import GoodList  from './GoodList';
export default {
  name: 'GoodListShow',
  props: {
    dateFactory: Object,
    index: Number,
    diyData: Array,
  },
  components: {
    GoodList,
  },
  data() {
    return {
      ruleFormLocal:this.dateFactory.ruleForm,
      currentIndex: 0,
    }
  },
   watch: {
    ruleFormLocal: {
      handler: function (newValue) {
        console.log(newValue, 'newValuenewValuenewValue')
        this.diyData[this.index].ruleForm = newValue
        this.$EventBus.$emit('diyFactory', this.diyData)
      },
      deep: true,
    }
  },
}
</script>

<style lang="less" scoped>
  // 操作
  .option-wrap {
    .el-form  {
      .edit-componet-title {
        margin-bottom: 15px;
        padding-bottom: 7px;
        border-bottom: 1px solid #e5e5e5;
        font-size: 14px;
      }
      .el-form-item {
        .side {
          display: flex;
          align-items: center;
          align-items: center;
          .el-slider {
            flex: 1;
          }
          &> span {
            margin-left: 14px;
          }
        }
      }
    }
  }
</style>